CSS Text Shadow Generator
This CSS text shadow generator helps you learn, experiment with, and design shadows for hyperlinks, headings, and any other text on your webpage. By adjusting each setting in real time, you can quickly see how different shadow combinations affect the appearance and readability of your text.
The CSS code for text shadows is made up of four key values: Horizontal Length, which controls how far the shadow moves left or right; Vertical Length, which sets how far the shadow moves up or down; Blur Radius, which determines how soft or sharp the shadow appears; and Shadow Color, which defines the color of the shadow itself. Together, these values give you full control over creating subtle depth, bold effects, or dramatic highlights for your text.
CSS Text Shadow Generator
Text Shadow CSS Property
The CSS text shadow property is used to add a shadow to the text. Multiple property parameters can be specified, separated by a comma.
Each shadow applies to the text of the element, as well as to all styles (for example, underlining) of the text.
Shadows are applied in the following order: the first shadow is located at the very top. Therefore, shadows can overlap each other, but they are never placed on top of the text.
Each shadow is usually given two or three length values (third is optional), and optionally a color. If you don't specify a color, the shadow will automatically inherit the text color. The color can be set using various formats (including RGB and HSL). We recommend specifying the color in rgba format, since it has some advantages over the hexadecimal colors. For example, this format allows you to use another value. This way, you can adjust not only the location, blur and color of the shadow, but also the opacity level (the same applies to the hsla format).
Syntax
The property takes on a composite value of four different parts: horizontal offset, vertical offset, blur and shadow color.
text-shadow: offset-x offset-y blur color;
Horizontal Offset (X-axis)
The first value offset-x, shifts the shadow along the X axis. A positive value will shift the shadow to the right, and a negative value - to the left.
.shadow1 {
text-shadow: 5px 0px 2px rgba(128, 0, 0, 1);
}
.shadow2 {
text-shadow: -5px 0px 2px rgba(128, 0, 0, 1);
}Vertical Offset (Y-axis)
The second value offset-y, shifts the shadow along the Y axis. A positive value will shift the shadow down, and a negative value - up.
.shadow3 {
text-shadow: 0px 5px 2px rgba(128, 0, 0, 1);
}
.shadow4 {
text-shadow: 0px -5px 2px rgba(128, 0, 0, 1);
}Blur
The third value - blur, is the radius of the shadow blur, see how it works on the text shadow generator above. A value of 0 means that the shadow will not be blurry at all, the edges and sides will be absolutely clear. The higher the value, the more blurry the shadow will become. Negative values are not allowed.
.shadow5 {
text-shadow: 0px 0px 5px rgba(128, 0, 0, 1);
}
.shadow6 {
text-shadow: 3px 3px 5px rgba(128, 0, 0, 1);
}Color
The shadow color can be absolutely any color and can be written in different formats available in CSS (HEX, RGB, RGBA, etc.), we use RGBA, so that you can set the opacity level of the shadow.
.shadow7 {
text-shadow: 0px 0px 5px #638253;
}
.shadow8 {
text-shadow: 3px 3px 5px rgba(0, 128, 0, 1);
}Multiple Shadows
With the CSS text-shadow property, you can add multiple shadows to the text. To add multiple shadows, just write them in a single property, separated by commas. Or, just use the generator above ... it's so much easier!
.shadow9 {
background: rgba(35, 35, 35, 1);
text-shadow: 0px 0px 5px rgba(255, 255, 255, 1),
0px 0px 10px rgba(255, 255, 255, 1),
0px 0px 15px rgba(255, 255, 255, 1),
0px 0px 20px rgba(73, 255, 24, 1),
0px 0px 30px rgba(73, 255, 24, 1),
0px 0px 40px rgba(73, 255, 24, 1),
0px 0px 55px rgba(73, 255, 24, 1),
0px 0px 75px rgba(73, 255, 24, 1);
}
.shadow10 {
text-shadow: 6px 6px #989898, 12px 12px #6c6666;
}
.shadow11 {
text-shadow: 2px 2px 0px rgba(255, 255, 255, 1),
5px 4px 0px rgba(0, 0, 0, 0.15);
}
.shadow12 {
color: rgba(255, 255, 255, 1);
text-shadow: 2px 2px 0px rgba(64, 116, 181, 1),
2px -2px 0px rgba(64, 116, 181, 1),
-2px 2px 0px rgba(64, 116, 181, 1),
-2px -2px 0px rgba(64, 116, 181, 1),
2px 0px 0px rgba(64, 116, 181, 1),
0px 2px 0px rgba(64, 116, 181, 1),
-2px 0px 0px rgba(64, 116, 181, 1),
0px -2px 0px rgba(64, 116, 181, 1);
}
.shadow13 {
color: rgba(167, 221, 60, 1);
text-shadow: 2px 0px 0px rgba(128, 0, 64, 1),
3px 2px 0px rgba(77, 0, 38, 0.5),
3px 0px 3px rgba(255, 0, 43, 1),
5px 0px 3px rgba(128, 0, 21, 1),
6px 2px 3px rgba(77, 0, 13, 0.5),
6px 0px 9px rgba(255, 85, 0, 1),
8px 0px 9px rgba(128, 42, 0, 1),
9px 2px 9px rgba(77, 25, 0, 0.5),
9px 0px 18px rgba(255, 213, 0, 1),
11px 0px 18px rgba(128, 106, 0, 1),
12px 2px 18px rgba(77, 66, 0, 0.5),
12px 0px 30px rgba(212, 255, 0, 1),
14px 0px 30px rgba(106, 128, 0, 1),
15px 2px 30px rgba(64, 77, 0, 0.5),
15px 0px 45px rgba(128, 255, 0, 1),
17px 0px 45px rgba(64, 128, 0, 1),
17px 2px 45px rgba(38, 77, 0, 0.5);
}
.shadow14 {
color: rgb(255, 255, 255);
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.2),
1px 1px 1px rgba(0, 0, 0, 0.6);
}
Frequently Asked Questions
What is the CSS text-shadow property?
text-shadow is a CSS property that adds one or more shadows to text.
Each shadow is defined by a horizontal offset, a vertical offset, an optional blur radius, and a color.
Shadows are rendered behind the text and never appear on top of it.
If no color is specified, the shadow inherits the element's current text color.
What are the four values of the CSS text-shadow property?
The four values are, in order: horizontal offset (how far the shadow shifts left or right - positive moves right, negative moves left),
vertical offset (how far the shadow shifts up or down - positive moves down, negative moves up),
blur radius (optional - a value of 0 produces a hard-edged shadow, higher values produce a softer blur; negative values are not allowed),
and color (optional - any valid CSS color value; rgba is recommended as it also lets you control opacity).
How do I add multiple shadows to text in CSS?
List each shadow as a comma-separated set of values within a single text-shadow declaration.
For example: text-shadow: 2px 2px 4px rgba(0,0,0,0.5), -2px -2px 4px rgba(255,255,255,0.3);
Shadows are layered in the order they are listed - the first shadow sits on top, each subsequent shadow sits beneath it.
They never appear on top of the text itself regardless of order.
What does the blur radius do in text-shadow?
The blur radius controls how soft or sharp the edges of the shadow appear.
A value of 0 produces a crisp, hard-edged shadow with no feathering.
As the value increases, the shadow spreads out and its edges become progressively softer and more diffuse.
The blur radius cannot be negative. It is the third value in the text-shadow shorthand and is optional - if omitted it defaults to 0.
Why should I use rgba() for text-shadow colors?
Using rgba() lets you control the opacity of the shadow independently of the text color, which hex values like #000000 do not allow.
A semi-transparent shadow - for example rgba(0, 0, 0, 0.3) - blends more naturally with different background colors and produces a subtler, more polished effect than a fully opaque shadow.
The hsla() format works the same way if you prefer to work in hue and saturation values.
Can I use text-shadow to create a text outline effect?
Yes. By layering multiple shadows in all four directions - top, bottom, left, and right - with zero blur and no offset, you can simulate a solid outline around text.
For example, four shadows at 1px 0, -1px 0, 0 1px, and 0 -1px in the same color will produce an outline on all sides.
This is a common workaround since CSS does not have a native text-outline property, though -webkit-text-stroke is an alternative in modern browsers.
Can I use text-shadow to create a glow effect?
Yes. Set the horizontal and vertical offsets both to 0 and use a moderate-to-large blur radius with a bright or vivid color.
Stacking several of these zero-offset shadows with increasing blur radii - for example 0 0 5px, 0 0 10px, 0 0 20px - intensifies the glow effect and is a popular technique for neon-style text.
Does text-shadow affect performance?
A small number of simple text shadows has negligible performance impact in modern browsers.
However, very large blur radius values and large numbers of stacked shadows - particularly on long passages of text or elements that animate - can increase paint times noticeably, especially on lower-powered devices.
For animated text, consider whether a simpler effect or a CSS filter: drop-shadow() alternative might be more efficient for your use case.
What is the difference between text-shadow and box-shadow?
text-shadow applies a shadow to the individual characters of text, following the shape of each letter.
box-shadow applies a shadow to the rectangular bounding box of an element, regardless of its content.
Both share a similar syntax, but box-shadow has two additional optional values: spread (which expands or contracts the shadow) and the inset keyword (which renders the shadow inside the element rather than outside). Neither of these exists in text-shadow.
What browsers support text-shadow?
text-shadow has full support across all modern browsers and has been widely supported since Internet Explorer 10. There are no vendor prefixes required. It works in Chrome, Firefox, Safari, Edge, and Opera without any additional declarations. For very old IE versions (IE 9 and below) the property is simply ignored, so it degrades gracefully - text remains readable, just without the shadow.
CSS References Used
- CSS Property
- text-shadow
- CSS Data Type
- <color>
- CSS Data Type
- <length>
- CSS Function
- rgba